<template>
  <div>
    <el-card>
      <el-tabs type="border-card">
        <el-tab-pane label="人族">
          <user-table
            :tableData="tableData"
            @searchFrom="getSearchList"
            @handleEditForm="getEditForm"
          ></user-table>
        </el-tab-pane>
        <el-tab-pane label="兽族">
          <user-table
            :tableData="tableData"
            @searchFrom="getSearchList"
            @handleEditForm="getEditForm"
          ></user-table>
        </el-tab-pane>
        <el-tab-pane label="神族">
          <user-table
            :tableData="tableData"
            @searchFrom="getSearchList"
            @handleEditForm="getEditForm"
          ></user-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import userTable from '@/components/userTable'
export default {
  name: 'users',
  components: {
    'user-table': userTable
  },
  data () {
    return {
      tableData: [
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 1,
          area: '善终'
        },
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 0,
          area: '善终'
        },
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 0,
          area: '善终'
        },
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 1,
          area: '善终'
        },
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 1,
          area: '善终'
        },
        {
          id: '魂字1205号',
          name: '狗日的',
          lifetime: '342',
          birthday: '2001-10-9',
          status: 1,
          area: '善终'
        }
      ]
    }
  },
  methods: {
    // 从子组件中获取搜索条件
    getSearchList (data) {
      console.log(data)
    },
    // 获取表单中修改的阳寿
    getEditForm (data) {
      console.log(data)
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>
